<template>
  <div class="col-lg-4">
    <div class="blog_right_sidebar">
      <aside class="single_sidebar_widget search_widget">
        <div class="form-group">
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder='请输入查询关键字'
                   v-model="search" onfocus="this.placeholder = ''" onblur="this.placeholder = '请输入查询关键字'">
          </div>
        </div>
        <button class="button rounded-0 primary-bg w-100 btn_1 boxed-btn"
                type="submit" @click="setSearchContent">查询
        </button>
      </aside>
      <aside class="single_sidebar_widget post_category_widget">
        <h4 class="widget_title" style="color: #2d2d2d;">文章分类</h4>
        <ul class="list cat-list">
          <li v-for="(category, index) in categoryList" :key="index">
            <a class="d-flex">
              <p>{{ category.name }}</p>
              <p>{{ category.number }}</p>
            </a>
          </li>
        </ul>
      </aside>
      <aside class="single_sidebar_widget popular_post_widget">
        <h3 class="widget_title" style="color: #2d2d2d;">近期要闻</h3>
        <div v-for="item in newList" :key="item" class="media post_item">
          <img src="../assets/img/new/new1.png" alt="post">
          <div class="media-body">
            <router-link :to="item.url">
              <h3 style="color: #2d2d2d;">{{ item.title }}</h3>
            </router-link>
            <p>{{ item.publishTime }}</p>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
import {getCategoryList, getNews} from "@/api/blog";

export default {
  name: "slider",
  data() {
    return {
      search: '',
      categoryList: [],
      newList: []
    }
  },
  created() {
    this.getCategoryList()
    this.getNewList()
  },
  methods: {
    getCategoryList() {
      getCategoryList().then(res => {
        this.categoryList = res.data
      })
    },
    getNewList() {
      getNews().then(res => {
        this.newList = res.data
      })
    },
    setSearchContent() {
      this.$emit('search', this.search)
    }
  }
}
</script>

<style scoped>
a:hover {
  text-decoration-line: none;
  cursor: pointer
}
</style>
